<template>
  <view>
    <table style="width:90%;height: 60vh;margin-top: 100rpx;margin-left: 5%;">
      <thead>
      <tr style="background-color: #ccc">
        <th>课程名</th>
        <th>课程序号</th>
        <th>任课教师</th>
        <th>学分</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td>{{ item.courseName }}</td>
        <td>{{ item.courseId }}</td>
        <td>{{ item.teacherName }}</td>
        <td>{{ item.studyScore }}</td>
        <td> <button @click="cancelCourse(item.courseId)">退课</button> </td>
      </tr>
      </tbody>
    </table>
    <view style="display: flex;margin-top: 60rpx;">
      <button class="button" @click="goToMyGrades">我的成绩</button>
    </view>

  </view>
</template>
<script>
import request from '@/common/request.js';
import student from '@/api/student/index.js'
import store from '@/store';
export default {
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    goToMyGrades() {
      uni.navigateTo({
        url: '/pages/myCourse/grade', // 跳转的目标页面路径
      });
    },
    async getCourse() {
      try {
        console.log(store.getters.getToken)
        console.log(store.getters.getUserInfo)
        const res = await student.stuCourses()
        this.tableData = res.data
        // 处理响应数据
        console.log('课程数据:', res)
      } catch (error) {
        // 处理错误
        console.error('错误:', error)
      }
    },
    async cancelCourse(courseId) {
      try {
        const res = await student.stuCancelCourse(courseId)
        console.log('退课结果:', res)
        if (res.code == 200) {
          uni.showToast({
            title: res.data,
            icon: 'success', // 可选值：'success', 'loading', 'none'
            duration: 2000, // 显示时长，单位为毫秒
            mask: true // 是否显示透明蒙层
          });
          await this.getCourse()
        }
        else {
          uni.showToast({
            title: res.data,
            icon: 'none', // 可选值：'success', 'loading', 'none'
            duration: 2000, // 显示时长，单位为毫秒
            mask: true // 是否显示透明蒙层
          });
        }
      } catch (error) {
        // 处理错误
        console.error('错误:', error)
      }
    }
  },
  async onLoad () {
    await this.getCourse()
  }
}
</script>
<style>
.button {
  border: 0;
  background-color: #409EFF;
  color: white;
  width: 180rpx;
  font-size: 14px;
}
button {
  border: 0;
  background-color: red;
  color: white;
  width: 90%;
  font-size: 12px;
}
table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  font-size: 14px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  word-wrap: break-word;
  white-space: pre-line;
}
td {

}
</style>